
<template>
  <div v-if="checkPermission(['admin'])" class="app-container">
    <el-row>
      <el-row :gutter="20">
        <el-col :span="24" :xs="24">
          <el-row style="padding-top: 20px">
            <div>
              <el-col :span="18">
                <Form ref="topSearchForm" :model="searchParams" inline>
                  <FormItem label="">
                    <span class="form-font">搜索:</span>
                    <Input v-model="searchParams.search" clearable placeholder="请输入Instance名称或IP" style="width: 200px" suffix-icon="el-icon-search" type="text" />
                  </FormItem>
                  <FormItem label="">
                    <span class="form-font">集群:</span>
                    <el-select v-model="searchParams.clusterId" filterable clearable size="small" style="width: 120px">
                      <el-option v-for="item in clustersList" :key="item.id" :label="item.name" :value="item.id">{{ item.name }} </el-option>
                    </el-select>
                  </FormItem>
                  <FormItem label="">
                    <span class="form-font">类型:</span>
                    <el-select v-model="searchParams.type" filterable clearable size="small" style="width: 120px">
                      <el-option v-for="item in instanceTypeChoice" :key="item.value" :label="item.label" :value="item.value">{{ item.label }} </el-option>
                    </el-select>
                  </FormItem>
                </Form>
              </el-col>
              <el-col align="right" :span="6">
                <a @click="addInstance"> <i class="el-icon-circle-plus"></i>&nbsp;&nbsp;添加Instance </a>
              </el-col>
            </div>
          </el-row>
          <page-table
            height="200"
            :columns="instanceColumns"
            :data="instanceDatas.data"
            :loading="instanceLoading"
            :max-height="instanceMaxHeight"
            :pagination="instancePagination"
            border
            size="small"
            stripe
            @on-change="onTableChange"
          ></page-table>
        </el-col>
      </el-row>
    </el-row>
    <instance-action
      v-if="showInstanceActionModal"
      :action="action"
      :instance-action-modal="showInstanceActionModal"
      :instance-info="instanceInfo"
      @on-instance-change="setInstanceActionModal"
    >
    </instance-action>
    <instance-delete :delete-modal="showInstanceDeleteModal" :instance-info="instanceInfo" @on-instance-delete="setDeleteModal"> </instance-delete>
  </div>
</template>

<script>
import PageTable from '@/components/PageTable/PageTable'
import { getRdsInstanceListByPage } from '@/api/rds/instance'
import { getRdsClusterList } from '@/api/rds/cluster'

import { instanceColumns, instanceTypeChoice } from '@/views/rds/instance/config'
import { getParams } from '@/libs/table'
import { snakeCaseObject } from '@/libs/object'
import checkPermission from '@/utils/permission'
import InstanceAction from '@/views/rds/instance/components/InstanceAction'
import InstanceDelete from '@/views/rds/instance/components/InstanceDelete'
export default {
  name: 'Instance',
  components: { PageTable, InstanceAction, InstanceDelete },
  data() {
    return {
      instancesList: [],
      sorter: {},
      pageSize: 15,
      pageNum: 1,
      clustersList: [],
      instanceLoading: false,
      instanceMaxHeight: 700,
      instanceTypeChoice: [],
      instanceInfo: {},
      instanceColumns: [],
      instanceDatas: [],
      searchParams: {
        name: '',
        type: '',
        vip: '',
        clusterId: ''
      },
      action: {
        title: '创建',
        type: 'create'
      },
      showInstanceDeleteModal: false,
      showInstanceLogDrawer: false,
      showInstanceActionModal: false
    }
  },
  computed: {
    instancePagination() {
      const { total, pageNum: current, pageSize } = this.instanceDatas
      return {
        total,
        current,
        pageSize
      }
    },
    requestParams() {
      const params = getParams(this)
      if (this.searchParams.search) {
        params['search'] = this.searchParams.search
      }
      if (this.searchParams.type) {
        params['type'] = this.searchParams.type
      }
      if (this.searchParams.clusterId) {
        params['clusterId'] = this.searchParams.clusterId
      }
      return params
    }
  },
  watch: {
    requestParams() {
      this.debouncedGetInstanceData()
    },
    searchParams: {
      handler(newName, oldName) {
        this.pageNum = 1
      },
      deep: true
    }
  },
  created() {
    this.debouncedGetInstanceData = this.$lodash.debounce(this.getRdsInstanceListByPage, 500)
  },
  mounted() {
    this.instanceColumns = instanceColumns(this)
    this.instanceTypeChoice = instanceTypeChoice
    this.debouncedGetInstanceData()
    this.getRdsClusterList()
  },
  methods: {
    checkPermission,
    setInitModelInfo() {
      this.searchParams = {
        name: '',
        search: '',
        type: '',
        clusterId: ''
      }
    },
    onTableChange(pagination, filters, sorter) {
      const { current: pageNum, pageSize } = pagination
      this.pageNum = pageNum
      this.pageSize = pageSize
      this.sorter = sorter
    },
    addInstance() {
      this.action = {
        title: '创建',
        type: 'create'
      }
      this.setInitModelInfo()
      this.instanceInfo = {}
      this.showInstanceActionModal = true
    },
    setConfirmInstanceModal(val) {
      this.showConfirmInstanceModal = val['status']
      if (!val['status'] && (val['type'] === 'update' || val['type'] === 'delete')) {
        this.getInstancePageList()
      }
    },
    setDeleteModal(val) {
      console.log(val)
      this.showInstanceDeleteModal = val['status']
      if (!val['status'] && val['type'] === 'delete') {
        this.debouncedGetInstanceData()
      }
    },
    setInstanceActionModal(val) {
      console.log(val)
      this.showInstanceActionModal = val['status']
      if (val['status']) {
        this.instanceInfo = {}
        this.action = {
          title: '创建',
          type: 'create'
        }
      }
      if (!val['status'] && (val['type'] === 'update' || val['type'] === 'create')) {
        console.log(123456)
        this.getRdsInstanceListByPage()
      }
    },
    async getRdsClusterList() {
      const { data } = await getRdsClusterList()
      this.clustersList = data
    },
    async getRdsInstanceListByPage() {
      this.instanceLoading = true
      const { data } = await getRdsInstanceListByPage(snakeCaseObject(this.requestParams))
      this.instanceDatas = data
      this.instanceLoading = false
    }
  }
}
</script>

<style>
.tree {
  overflow: auto;
  max-height: 1000px;
  margin-top: 20px;
}
.el-tree {
  min-width: 100%;
  display: inline-block;
}
.form-font {
  color: #515a6e;
  line-height: 32px;
  font-size: 13px;
  padding-right: 10px;
}
</style>
